<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>显隐拆楼</title>

    <link rel="stylesheet" href="./lib/styles.css" />

    <script type="text/javascript" src="./lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="./lib/aircity/ac.min.js"></script>
  </head>
  <body>
    <div id="player"></div>

    <div class="btn" onclick="reset()">重置模型</div>

    <div class="build-list">
      <div class="build-item" onclick="chooseFloor('L13')">L13</div>
      <div class="build-item" onclick="chooseFloor('L12')">L12</div>
      <div class="build-item" onclick="chooseFloor('L11')">L11</div>
      <div class="build-item" onclick="chooseFloor('L10')">L10</div>
      <div class="build-item" onclick="chooseFloor('L9')">L9</div>
      <div class="build-item" onclick="chooseFloor('L8')">L8</div>
      <div class="build-item" onclick="chooseFloor('L7')">L7</div>
      <div class="build-item" onclick="chooseFloor('L6')">L6</div>
      <div class="build-item" onclick="chooseFloor('L5')">L5</div>
      <div class="build-item" onclick="chooseFloor('L1-4')">L1-4</div>
    </div>

    <script type="text/javascript">
      // 拆楼建筑名称数组
      const buildNameList = ['L1-4', 'L5', 'L6', 'L7', 'L8', 'L9', 'L10', 'L11', 'L12', 'L13']
      // 拆楼建筑对象,保存id
      const buildIdObj = {}

      /**
       * 初始化场景
       */
      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
          domId: 'player',
          apiOptions: {
            //事件监听回调函数
            onReady: async () => {
              // 重置视频流
              await fdapi.reset(2 | 4)

              // 获取图层树信息，让图层名称与id绑定
              const { infotree } = await fdapi.infoTree.get()
              infotree.forEach(item => {
                if (buildNameList.includes(item.name)) {
                  buildIdObj[item.name] = item.iD
                }
              })
            }
          }
        })
      }

      // 选择楼层
      const chooseFloor = name => {
        const showList = [],
          hideList = []

        // 高于选择楼层就要隐藏，这边做个判断
        let isHide = false
        buildNameList.forEach(itemName => {
          isHide ? hideList.push(buildIdObj[itemName]) : showList.push(buildIdObj[itemName])
          if (itemName == name) isHide = true
        })

        // 操作模型
        __g.tileLayer.show(showList)
        __g.tileLayer.hide(hideList)
      }

      // 重置模型
      const reset = async () => {
        const idList = []
        for (let key in buildIdObj) idList.push(buildIdObj[key])
        __g.tileLayer.show(idList)
      }

      /**
       * 自适应分辨率
       */
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      // 页面加载调用
      window.addEventListener('load', OnLoad, true)

      // 页面窗口变换调用
      window.addEventListener('resize', onResize, true)
    </script>
  </body>
</html>
